<template>
  <div class="p-[20px] bg-white">
    <vxe-grid v-bind="gridOptions">
      <template #logo="scope">
        <div class="flex items-center flex-col gap-[6px]">
          <template v-if="scope.row.logo || scope.row.name">
            <el-avatar v-if="scope.row.logo" :src="scope.row.logo" />
            <div>{{ scope.row.name }}</div>
          </template>
          <span v-else>-</span>
        </div>
      </template>
      <template #operate="scope">
        <RouterLink :to="{ name: 'StoreNew', query: { id: scope.row.id } }">
          <el-button class="mr-[10px]" type="text">编辑</el-button>
        </RouterLink>
        <RouterLink
          :to="{
            name: 'StoreSetting',
            query: { storeCode: scope.row.storeCode },
          }"
        >
          <el-button class="mr-[10px]" type="text">聚合支付</el-button>
        </RouterLink>
      </template>
    </vxe-grid>
  </div>
</template>

<script lang="ts" setup>
import StoreAPI from "@/api/store";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";

interface RowVO {
  [key: string]: any;
}
const router = useRouter();

const STATUS_STORE = [
  { label: "全部", value: "" },
  { label: "待审核", value: 0 },
  { label: "审核通过", value: 1 },
  { label: "审核未通过", value: 2 },
];

const handleEdit = (row: RowVO) => {
  router.push({ name: "StoreNew", query: { id: row.id } });
};

const gridOptions = reactive<VxeGridProps<RowVO>>({
  showOverflow: false,
  border: true,
  // height: "auto",
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    align: "center",
    items: [],
  },
  proxyConfig: {
    form: true,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page, form }) => {
        return StoreAPI.getList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left", align: "center" },
    { title: "创建时间", align: "center", field: "createdAt", minWidth: 200 },
    {
      title: "商家编号<br/>商家分类",
      type: "html",
      align: "center",
      field: "storeCode",
      minWidth: 220,
      formatter: ["doubleProp", "categoryName"],
    },
    {
      title: "商家logo<br/>商家名称",
      type: "html",
      align: "center",
      slots: { default: "logo" },
      field: "logo",
      minWidth: 220,
    },
    // {
    //   title: "渠道名称<br/>渠道编号",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "nickname"],
    //   field: "username",
    //   minWidth: 220,
    // },
    // {
    //   title: "商务名称<br/>商务编号",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "1"],
    //   field: "u",
    //   minWidth: 220,
    // },
    {
      title: "所属地区",
      field: "1",
      minWidth: 160,
      formatter: ({ row }) => {
        return `${row.provinceName || ""}${row.cityName || ""}${row.districtName || ""}`;
      },
    },
    {
      title: "联系人姓名<br/>联系人电话",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "managerTel"],
      field: "managerName",
      minWidth: 220,
    },
    // { title: "联系人电话", field: "managerTel", minWidth: 160 },
    {
      title: "商家状态",
      field: "reviewStatus",
      minWidth: 220,
      formatter: ({ cellValue }) => {
        return STATUS_STORE.find((t) => t.value === cellValue)?.label ?? "";
      },
    },
    {
      title: "操作",
      field: "operate",
      fixed: "right",
      align: "center",
      slots: { default: "operate" },
      minWidth: 160,
    },
  ],
});

const initFormConfig = (
  categories: Array<{ label: string; value: string }>
) => {
  if (gridOptions.formConfig) {
    gridOptions.formConfig.items = [
      {
        field: "createdAt",
        title: "创建时间",
        span: 6,
        itemRender: {
          name: "ElDatePicker",
          props: {
            type: "daterange",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
          },
        },
      },
      // 审核状态
      {
        field: "reviewStatus",
        title: "审核状态",
        span: 6,
        itemRender: {
          name: "ElSelect",
          options: STATUS_STORE,
          props: {
            placeholder: "请选择",
          },
        },
      },
      // 商家名称
      {
        field: "name",
        title: "商家名称",
        span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家名称",
          },
        },
      },
      // 商家编号
      {
        field: "storeCode",
        title: "商家编号",
        span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家编号",
          },
        },
      },
      // 商家分类
      {
        field: "cid",
        title: "商家分类",
        span: 6,
        itemRender: {
          name: "ElSelect",
          options: categories,
          props: {
            placeholder: "请选择",
          },
        },
      },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          options: [
            { type: "submit", content: "搜索", status: "primary" },
            { type: "reset", content: "重置" },
          ],
        },
      },
    ];
  }
};

onMounted(() => {
  StoreAPI.getCategoryOptions().then((res) => {
    const categories = res.map((t) => ({
      label: t.name,
      value: t.id?.toString(),
    }));
    initFormConfig(categories);
  });
});
</script>
